<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <div class="tab-bar">
      <h3
        v-for="(item, index) in title"
        :key="item"
        :class="{ active: currentIndex === index }"
        @click="changeTab(index)"
      >
        {{ item }}</h3>
    </div>
    <!-- 基本信息 -->
    <div
      v-if="currentIndex === 0"
      class="info"
    >
      <div class="form">
        <div class="item">
          <div class="key">员工编号</div>
          <el-input
            v-if="isShow"
            v-model="basicInfo.account"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="basicInfo.account"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">司机姓名</div>
          <el-input
            v-if="isShow"
            v-model="basicInfo.name"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="basicInfo.name"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">所属机构</div>
          <el-input
            v-if="isShow"
            v-model="basicInfo.agency.name"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="basicInfo.agency.name"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">手机号</div>
          <el-input
            v-if="isShow"
            v-model="basicInfo.mobile"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="basicInfo.mobile"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">年龄</div>
          <el-input
            v-if="isShow"
            v-model="basicInfo.age"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="basicInfo.age"
          ></el-input>
        </div>
      </div>
      <div class="btn">
        <el-button
          v-if="isShow"
          type="warning"
          @click="edit"
        >编辑</el-button>
        <div
          v-else
          class="btns"
        >
          <el-button @click="isShow=true">返回</el-button>
          <el-button
            type="warning"
            @click="editInfo"
          >保存</el-button>
        </div>
      </div>
    </div>
    <!-- 驾驶证信息 -->
    <div
      v-else
      class="info"
    >
      <div class="form">
        <div class="item">
          <div class="key">驾驶证号</div>
          <el-input
            v-if="isShow"
            v-model="licenseInfo.licenseNumber"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="licenseInfo.licenseNumber"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">准驾车型</div>
          <el-input
            v-if="isShow"
            v-model="licenseInfo.allowableType"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="licenseInfo.allowableType"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">初领证日期</div>
          <el-input
            v-if="isShow"
            v-model="licenseInfo.initialCertificateDate"
            disabled
          ></el-input>
          <el-date-picker
            v-else
            v-model="licenseInfo.initialCertificateDate"
            style="margin-left:43px"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div class="item">
          <div class="key">有效期限</div>
          <el-input
            v-if="isShow"
            v-model="licenseInfo.validPeriod"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="licenseInfo.validPeriod"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">驾龄</div>
          <el-input
            v-if="isShow"
            v-model="licenseInfo.driverAge"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="licenseInfo.driverAge"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">驾驶证类型</div>
          <el-input
            v-if="isShow"
            v-model="licenseInfo.licenseType"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="licenseInfo.licenseType"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">从业资格证</div>
          <el-input
            v-if="isShow"
            v-model="licenseInfo.qualificationCertificate"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="licenseInfo.qualificationCertificate"
          ></el-input>
        </div>
        <div class="item">
          <div class="key">入场证信息</div>
          <el-input
            v-if="isShow"
            v-model="licenseInfo.passCertificate"
            disabled
          ></el-input>
          <el-input
            v-else
            v-model="licenseInfo.passCertificate"
          ></el-input>
        </div>
        <div
          class="item"
          style="width: 500px"
        >
          <div class="key">图片信息</div>
          <img
            v-if="isShow"
            :src="licenseInfo.picture"
            alt=""
          >
          <el-upload
            v-else
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="uploadImg"
          >
            <i
              slot="default"
              class="el-icon-plus"
            ></i>
            <div
              slot="file"
              slot-scope="{file}"
            >
              <img
                class="el-upload-list__item-thumbnail"
                :src="licenseInfo.picture"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img
              width="100%"
              :src="dialogImageUrl"
              alt=""
            >
          </el-dialog>
        </div>
      </div>
      <div style="margin-top: 250px; text-align: center;">
        <el-button
          v-if="isShow"
          type="warning"
          @click="edit"
        >编辑</el-button>
        <div
          v-else
          class="btns"
        >
          <el-button @click="isShow = true">返回</el-button>
          <el-button
            type="warning"
            @click="updateInfo"
          >保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { driverDetail, driverDetailUpdate, driverLicenseDetail, imgUpload, driverLicenseDetailUpdate } from '@/api/transit'
export default {
  data() {
    return {
      title: ['基本信息', '行驶证信息'],
      currentIndex: 0, // 高亮显示变量
      // 基本信息
      basicInfo: {
        account: '',
        age: null,
        agency: {
          id: null,
          name: '',
          subAgencies: null,
          type: null
        },
        id: null,
        mobile: '',
        name: '',
        picture: null,
        truck: null,
        userId: '',
        workDate: null,
        workStatus: null

      },
      isShow: true, // 开关
      // 行驶证信息
      licenseInfo: {
        allowableType: '', // 准驾车型
        id: null, // 司机ID
        userId: null, // 司机ID
        initialCertificateDate: '', // 初次领证日期
        validPeriod: '', // 有效期限
        licenseNumber: '', // 驾驶证号
        driverAge: '', // 驾龄
        licenseType: '', // 驾驶证类型
        qualificationCertificate: '', // 从业资格证信息
        passCertificate: '', // 入场证信息
        picture: '' // 图片
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  created() {
    this.getDirverInfo()
    this.getLicenseInfo()
  },
  methods: {
    // tab切换
    changeTab(index) {
      this.currentIndex = index
    },
    // 获取基本信息
    async getDirverInfo() {
      const res = await driverDetail(this.id)
      this.basicInfo = res.data
    },
    // 更新基本信息
    edit() {
      this.isShow = false
    },
    async editInfo() {
      await driverDetailUpdate(this.id, this.basicInfo)
      this.$message.success('修改成功')
      this.isShow = true
    },
    // 获取驾驶证信息
    async getLicenseInfo() {
      const res = await driverLicenseDetail(this.id)
      this.licenseInfo = res.data
    },
    // 上传图片
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    async uploadImg(file) {
      const fd = new FormData()
      fd.append('file', file.raw)
      const res = await imgUpload(fd)
      this.licenseInfo.picture = res.data
    },
    // 修改行驶证信息
    async updateInfo() {
      await driverLicenseDetailUpdate(this.licenseInfo)
      this.$message.success('修改成功')
      this.isShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.dashboard-container {
  padding: 10px;
  margin: 20px;
  background-color: #fff;
  height: 900px;

  .tab-bar {
    display: flex;
    border-bottom: 1px solid #eee;

    h3 {
      padding-bottom: 10px;
      margin-left: 50px;
      font-weight: 400;
      cursor: pointer;
    }

    .active {
      color: black;
      font-weight: 700;
      border-bottom: 3px solid #e15536;
    }
  }

  .info {
    height: 700px;

    .form {
      margin: 40px;
      display: flex;
      flex-wrap: wrap;

      .item {
        display: flex;
        align-items: center;
        margin-right: 150px;
        margin-bottom: 30px;

        .key {
          width: 130px;
        }

        .el-input {
          width: 300px;
        }

        img {
          width: 216px;
          height: 180px;
        }
      }
    }

    .btn {
      margin-top: 500px;
      text-align: center;
      background-color: #fff;
    }
  }

}
</style>
